<template>
  <div>
    <van-tabbar v-model="active">
      <van-tabbar-item to="/index" icon="shop">
        <span>首页</span>
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? home.active : home.normal" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/productlist" icon="shop">
        <span>商品</span>
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? product.active : product.normal" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/cart" icon="shop">
        <span>购物车</span>
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? car.active : car.normal" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/me" icon="shop">
        <span>我的</span>
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? me.active : me.normal" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // tabbar-bottom
      active: 0,
      home: {
        normal: require('@/common/image/home-d.png'),
        active: require('@/common/image/home.png')
      },
      product: {
        normal: require('@/common/image/product-d.png'),
        active: require('@/common/image/product.png')
      },
      car: {
        normal: require('@/common/image/car-d.png'),
        active: require('@/common/image/car.png')
      },
      me: {
        normal: require('@/common/image/me-d.png'),
        active: require('@/common/image/me.png')
      }
    }
  },
  methods: {
    clickTabItem (e) {
      console.log(e)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable.styl'
.van-tabbar-item--active
  color $theme-color
</style>
